<template>
  <div class="container">
    <el-card>
      <div slot="header">
        <div class="card-header">
          <el-page-header>
            <template>
              <div slot="content">
                <div class="out">
                   <p>车位管理</p>
                <el-button type="primary" icon="el-icon-plus" @click="add"
                  >添加</el-button
                >
                </div>
               
              </div>
            </template>
          </el-page-header>
        </div>
      </div>
      <div>
        <el-table
          :data="final_db_park_pot"
          stripe
          style="width: 90%"
          ref="table"
          height="70vh"
          @cell-mouse-enter="show_del"
          @cell-mouse-leave="hidden_del"
        >
          <el-table-column prop="idCode" label="车位号" align="center">
          </el-table-column>
          <el-table-column
            align="center"
            header-align="center"
            label="区域"
            prop="region"
            width="300px"
          >
            <template slot="header" slot-scope="scope">
              区域
              <!-- <el-cascader
                v-model="value"
                :options="regionDivide"
                @change="cascaderHandleChange"
              >
              </el-cascader> -->
            </template>
          </el-table-column>

          <el-table-column
            prop="size"
            label="尺寸"
            align="center"
            :filters="filterSize"
            :filter-method="filterHandler"
          ></el-table-column>
          <el-table-column prop="type" label="类型" align="center">
          </el-table-column>
          <el-table-column
            prop="state"
            label="状态"
            align="center"
            :filters="filterState"
            :filter-method="filterHandler"
          />
          <el-table-column
            prop="originPrice"
            label="初始价格"
            sortable
            align="center"
          >
          </el-table-column>
          <el-table-column width="40px">
            <template slot-scope="scope">
              <i
                class="el-icon-circle-close"
                @click="delItem(scope.row)"
                v-if="scope.row.id == currentItem.id"
              ></i>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>
<script>
let get_all_info = function (propertyname) {
  this.axios({
    url: "http://47.99.124.245:8082/getRegion",
    method: "get",
    params: {
      propertyname: propertyname,
    },
  })
    .then((res) => {
      console.log(res);
      let result = [];
      if (res.data.code == 200) {
        let data = res.data.data;
        let set = new Set();
        for (let i of data) {
          set.add(i.region1);
        }
        for (let i of set) {
          this.axios({
            url: "http://47.99.124.245:8082/getparkinglotByregion",
            params: {
              region1: i,
              region2: "",
              region3: "",
            },
          }).then((res) => {
            console.log(res);
            let setToArr = (set) => {
              let result = [];
              for (let i of set) {
                result.push(i);
              }
              return result;
            };

            let size_set = new Set();
            let states_set = new Set();
            let types_set = new Set();

            let result_arr = res.data.data;
            if (result_arr != null) {
              this.parking_info.splice(0, this.parking_info.length);
              result_arr.forEach((element) => {
                element.idCode = element.id;
                let _region = [element.region];
                if (element.region2 != null) {
                  _region.push(element.region2);
                }
                if (element.region3 != null) {
                  _region.push(element.region3);
                }
                element.region = _region;
                size_set.add(element.size);
                states_set.add(element.state);
                types_set.add(element.type);
                element.originPrice = element.beforeprice;
                element.currentPrice = element.nowprice;
                this.parking_info.push(element);
              });

              //把所有信息存到vuex中
              this.$store.commit("init_park_pot", this.parking_info);

              setToArr(size_set).forEach((x) => {
                this.size.push(x);
              });
              setToArr(states_set).forEach((x) => {
                this.states.push(x);
              });
              setToArr(types_set).forEach((x) => {
                this.types.push(x);
              });
            }
          });
        }
      }
    })
    .then((res) => {});
};
import { mapState } from "vuex";
import { mapActions } from "vuex";
import all from "../assets/m_axios";
export default {
  watch: {
    current_property: {
      immediate: true,
      handler: function (newvalue, oldvalue) {
        //整理车位信息

        if (newvalue != null) {
          let propertyname = newvalue.area;
          get_all_info.bind(this)(propertyname);
          this.$store.dispatch("getRegionInfo").then((res) => {
            let data = res[0].children;
            function createChild(arr) {
              let result = [];
              let obj;
              for (let i of arr) {
                if (i.value) {
                  obj = {
                    value: i.value,
                    label: i.label,
                  };
                  if (i.children.length != 0) {
                    obj.children = createChild(i.children);
                  }
                } else {
                  obj = {
                    value: i,
                    label: i,
                  };
                }
                result.push(obj);
              }
              return result;
            }
            if (data) {
              this.regionDivide.splice(0, this.regionDivide.length);
              createChild(data).forEach((x) => {
                this.regionDivide.push(x);
              });
            }
          });
        }
      },
    },
  },
  computed: {
    ...mapState(["current_property_index", "current_property", "db_park_pot"]),
    final_db_park_pot() {
      return this.db_park_pot.filter((item) =>
        this.searchInput == "" ? true : item.id == this.searchInput
      );
    },

    //筛选用数据
    filterType() {
      let res = [];
      for (let i of this.types) {
        res.push({ text: i, value: i });
      }
      return res;
    },
    filterSize() {
      let res = [];
      for (let i of this.size) {
        res.push({ text: i, value: i });
      }
      return res;
    },
    filterState() {
      let res = [];
      for (let i of this.states) {
        res.push({ text: i, value: i });
      }
      return res;
    },
    //分页用的数据
    total() {
      return this.parking_info.length;
    },

    showParkingInfo() {
      let start = (this.currentPage - 1) * this.pageSize;
      let end = this.currentPage * this.pageSize;
      console.log(end, start);
      let t = this.parking_info;
      if (this.value.length != 0) {
        t = t.filter((x) => {
          let region = x.regison;
          for (let i in region) {
            if (region[i] != this.value[i]) return false;
          }
          return true;
        });
      }
      if (t.length > this.pageSize) {
        t = t.slice(start, end).concat();
      }
      return t;
    },
  },
  data() {
    return {
      currentItem: "",
      size: [
        // "字母", "豪华", "微型"
      ],
      states: [
        // "已售出",
        // "未开售",
        // "待签约",
        // "待支付",
        // "在售中",
        // "分销中",
        // "代销中",
      ],
      types: [
        // ["人防", "非人防"],
        // ["地上", "地下"],
      ],
      value: [],
      regionDivide: [
        {
          value: "A",
          label: "A",
          children: [
            // {
            //   value: "北",
            //   label: "北",
            //   // children: {
            //   //   value: "甲",
            //   //   label: "甲",
            //   // },
            // },
          ],
        },
      ],
      searchInput: "",
      parking_info: [
        // {
        //   idCode: "A001",
        //   region: ["A", "北"],
        //   size: "豪华",
        //   state: "已售出",
        //   type: ["非人防", "地下"],
        //   originPrice: 22334,
        //   currentPrice: 10000,
        // },
      ],
    };
  },
  methods: {
    show_del(row) {
      this.currentItem = row;
    },
    hidden_del(row) {
      this.currentItem = {};
    },
    delItem(row) {
      all.deleteItem
        .bind(this)("http://47.99.124.245:8082/deleteParkinglot", {
          number: row.number,
        })
        .then((code) => {
          let propertyname = this.current_property.area;
          get_all_info.bind(this)(propertyname);
        });
    },
    ...mapActions([
      "getRegionInfo", // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`
    ]),

    back() {
      this.$router.go(-1);
    },
    filterHandler(value, row, column) {
      const property = column["property"];
      return row[property].trim() === value.trim();
    },
    add() {
      this.$router.push("parking-space-add");
    },
    cascaderHandleChange(val) {},
    filterHander(value, row, column) {
      return row.region == value;
    },
  },
};
</script>

<style scoped>
/*-------------------------表头样式-------------------*/
.el-card {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.card-header {
  width: 100%;
  align-items: center;
}
.card-header p {
  text-align: center;
  font-weight: bold;
  flex: 1;
}
.card-header .el-button {
  margin: 0.5rem;
}
.out{
  display: flex;
  align-items: center;
  justify-content: space-between
}
.el-page-header {
  width: 100%;
 
}
.card-header >>> .el-page-header__content{
  flex: 1;
}
.card-header >>> .el-page-header__left{
  align-items: center;
}
/*--------------------------------------------------------*/


.el-card .el-table {
  width: 400px;
  width: 80%;
  margin: auto;
}
.container {
  height: 100%;
  position: relative;
}

.m-pagination {
  text-align: center;
}
.el-footer {
  width: 100%;
  position: absolute;
  bottom: 0px;
}
</style>